<template>
    <div class="background">
        <div style="display: flex;flex-direction: column;width: 100%;align-items: center;">
            <h1 class="system-header">斗牛</h1>

            <div class="content">
                <Controller ref="controllerShiJian" @display="displayMsg" @startGame="startGame"/>

                <h2 style="text-align: center;color: gold" v-show="isShow">最终结果：{{msg}}</h2>
                <div class="playerBox">
                    <Player v-for="player in playerNum" :key="player" :player-index="player" v-show="isShow" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Player from "@/components/Player";
    import Controller from "@/components/Controller";

    export default {
        name: 'Version',
        data() {
            return {
                playerNum: 0,
                playerResults: [],
                msg: '',//结果
                isShow:false,//判断是否点击开始游戏的按钮

            }
        },
        props: {},
        methods: {
            displayMsg(msg) {
                console.log("显示结果msg" + msg)
                this.msg = msg
            },
            startGame(isShow){
                this.isShow = isShow
            }
        },
        mounted() {
            this.$refs.controllerShiJian.$on('func', (playerNum) => {
                this.playerNum = playerNum
            })

        },

        components: {Player, Controller},

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .playerBox {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .background{
        background-color: white;
        display: -webkit-flex;
        width: 100%;
    }
    .content {
        width: 900px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 50px;
    }
    .system-header {
        color: goldenrod;
        -webkit-text-stroke-color: #444444;
        -webkit-text-stroke-width: 2px;
        font-size: 70px;
        text-align: center;
    }
</style>
